<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuxeMart - 高端在线购物体验</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部通知栏 -->
    <div class="top-bar">
        <div class="container">
            <span>🎁 新用户首单立减50元 | 📦 全场满199元包邮</span>
            <div class="top-bar-links">
                <a href="#help">客服中心</a>
                <a href="#track">订单追踪</a>
            </div>
        </div>
    </div>

    <!-- 主导航 -->
    <header class="header">
        <div class="container">
            <!-- 移动端菜单按钮 -->
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <span></span>
                <span></span>
                <span></span>
            </button>

            <!-- 品牌标志 -->
            <div class="brand">
                <div class="logo">
                    <span class="logo-icon">🛍️</span>
                    <h1>LuxeMart</h1>
                </div>
            </div>

            <!-- 主导航 -->
            <nav class="main-nav" id="mainNav">
                <ul>
                    <li><a href="#home" class="nav-link active">首页</a></li>
                    <li><a href="#products" class="nav-link">商品</a></li>
                    <li><a href="#categories" class="nav-link">分类</a></li>
                    <li><a href="#deals" class="nav-link">促销</a></li>
                    <li><a href="#brands" class="nav-link">品牌</a></li>
                </ul>
            </nav>

            <!-- 右侧操作区 -->
            <div class="header-actions">
                <!-- 搜索框 -->
                <div class="search-container">
                    <input type="text" id="searchInput" placeholder="搜索心仪商品..." class="search-input">
                    <button id="searchBtn" class="search-btn">
                        <span class="search-icon">🔍</span>
                    </button>
                </div>

                <!-- 用户操作 -->
                <div class="user-actions">
                    <button class="action-btn" id="wishlistBtn">
                        <span class="icon">❤️</span>
                        <span class="badge">3</span>
                    </button>
                    <button class="action-btn" id="cartBtn">
                        <span class="icon">🛒</span>
                        <span class="badge" id="cartCount">0</span>
                    </button>
                    <button class="action-btn" id="userBtn">
                        <span class="icon">👤</span>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 移动端搜索栏 -->
    <div class="mobile-search-bar">
        <div class="container">
            <input type="text" placeholder="搜索商品..." class="mobile-search-input">
            <button class="mobile-search-btn">搜索</button>
        </div>
    </div>

    <!-- 主要内容 -->
    <main class="main-content">
        <!-- 英雄横幅 -->
        <section class="hero-banner" id="home">
            <div class="hero-slider">
                <div class="slide active">
                    <div class="slide-content">
                        <div class="slide-text">
                            <h2 class="slide-title">夏季新品上市</h2>
                            <p class="slide-subtitle">精选时尚单品，打造完美夏日造型</p>
                            <p class="slide-desc">全场新品8折起，满额再享优惠</p>
                            <button class="slide-cta">立即选购</button>
                        </div>
                        <div class="slide-image">
                            <img src="https://picsum.photos/600/400?random=101" alt="夏季新品">
                        </div>
                    </div>
                </div>
            </div>
            <div class="hero-indicators">
                <span class="indicator active"></span>
                <span class="indicator"></span>
                <span class="indicator"></span>
            </div>
        </section>

        <!-- 特色分类 -->
        <section class="featured-categories">
            <div class="container">
                <h2 class="section-title">热门分类</h2>
                <div class="categories-grid">
                    <div class="category-card">
                        <div class="category-icon">📱</div>
                        <h3>电子产品</h3>
                        <p>最新科技产品</p>
                    </div>
                    <div class="category-card">
                        <div class="category-icon">👕</div>
                        <h3>时尚服饰</h3>
                        <p>潮流穿搭指南</p>
                    </div>
                    <div class="category-card">
                        <div class="category-icon">🏠</div>
                        <h3>家居生活</h3>
                        <p>提升生活品质</p>
                    </div>
                    <div class="category-card">
                        <div class="category-icon">💄</div>
                        <h3>美妆护肤</h3>
                        <p>美丽从心开始</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 商品展示区 -->
        <section class="products-showcase" id="products">
            <div class="container">
                <div class="section-header">
                    <h2 class="section-title">精选商品</h2>
                    <div class="view-all">
                        <a href="#all-products">查看全部</a>
                    </div>
                </div>

                <!-- 筛选栏 -->
                <div class="filters-bar">
                    <div class="filter-group">
                        <label>分类:</label>
                        <select id="categoryFilter" class="filter-select">
                            <option value="">全部</option>
                            <option value="electronics">电子产品</option>
                            <option value="clothing">服装</option>
                            <option value="books">图书</option>
                            <option value="home">家居</option>
                            <option value="beauty">美妆</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>价格:</label>
                        <select id="priceFilter" class="filter-select">
                            <option value="">全部</option>
                            <option value="0-100">¥100以下</option>
                            <option value="100-300">¥100-300</option>
                            <option value="300-500">¥300-500</option>
                            <option value="500+">¥500以上</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>排序:</label>
                        <select id="sortFilter" class="filter-select">
                            <option value="default">推荐</option>
                            <option value="price-low">价格从低到高</option>
                            <option value="price-high">价格从高到低</option>
                            <option value="rating">评分最高</option>
                            <option value="newest">最新上架</option>
                        </select>
                    </div>
                </div>

                <!-- 商品网格 -->
                <div id="productsGrid" class="products-grid">
                    <!-- 商品卡片将通过JavaScript动态生成 -->
                </div>

                <!-- 加载更多 -->
                <div class="load-more">
                    <button id="loadMoreBtn" class="load-more-btn">加载更多商品</button>
                </div>
            </div>
        </section>

        <!-- 促销横幅 -->
        <section class="promo-banner">
            <div class="container">
                <div class="promo-content">
                    <div class="promo-text">
                        <h3>会员专享福利</h3>
                        <p>注册即享95折优惠，积分兑换好礼</p>
                        <button class="promo-cta">立即注册</button>
                    </div>
                    <div class="promo-image">
                        <img src="https://picsum.photos/400/250?random=102" alt="会员福利">
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 购物车侧边栏 -->
    <aside id="cartSidebar" class="cart-sidebar">
        <div class="cart-header">
            <h3>我的购物车</h3>
            <button id="closeCart" class="close-btn">×</button>
        </div>
        <div id="cartItems" class="cart-items">
            <!-- 购物车商品将通过JavaScript动态生成 -->
        </div>
        <div class="cart-footer">
            <div class="cart-summary">
                <div class="summary-row">
                    <span>商品金额:</span>
                    <span>¥<span id="subtotal">0.00</span></span>
                </div>
                <div class="summary-row">
                    <span>运费:</span>
                    <span>¥<span id="shipping">0.00</span></span>
                </div>
                <div class="summary-row total">
                    <span>实付金额:</span>
                    <span>¥<span id="cartTotal">0.00</span></span>
                </div>
            </div>
            <button id="checkoutBtn" class="checkout-btn">立即结算</button>
        </div>
    </aside>

    <!-- 用户菜单 -->
    <div id="userMenu" class="user-menu">
        <div class="menu-content">
            <div class="user-info">
                <div class="user-avatar">👤</div>
                <div class="user-details">
                    <h4>欢迎来到LuxeMart</h4>
                    <p>登录后享受更多权益</p>
                </div>
            </div>
            <div class="menu-items">
                <a href="#login" class="menu-item">
                    <span class="icon">🔑</span>
                    <span>登录/注册</span>
                </a>
                <a href="#orders" class="menu-item">
                    <span class="icon">📦</span>
                    <span>我的订单</span>
                </a>
                <a href="#wishlist" class="menu-item">
                    <span class="icon">❤️</span>
                    <span>我的收藏</span>
                </a>
                <a href="#coupons" class="menu-item">
                    <span class="icon">🎫</span>
                    <span>优惠券</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>购物指南</h4>
                    <ul>
                        <li><a href="#shopping">购物流程</a></li>
                        <li><a href="#members">会员介绍</a></li>
                        <li><a href="#points">积分说明</a></li>
                        <li><a href="#coupons">优惠券使用</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>配送方式</h4>
                    <ul>
                        <li><a href="#delivery">上门自提</a></li>
                        <li><a href="#express">快递配送</a></li>
                        <li><a href="#overseas">海外配送</a></li>
                        <li><a href="#tracking">订单追踪</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>支付方式</h4>
                    <ul>
                        <li><a href="#wechat">微信支付</a></li>
                        <li><a href="#alipay">支付宝</a></li>
                        <li><a href="#unionpay">银联支付</a></li>
                        <li><a href="#installment">分期付款</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>售后服务</h4>
                    <ul>
                        <li><a href="#return">退换货政策</a></li>
                        <li><a href="#refund">退款说明</a></li>
                        <li><a href="#warranty">保修政策</a></li>
                        <li><a href="#contact">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-section newsletter">
                    <h4>订阅资讯</h4>
                    <p>获取最新优惠和产品信息</p>
                    <div class="newsletter-form">
                        <input type="email" placeholder="输入您的邮箱">
                        <button type="submit">订阅</button>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-info">
                    <p>&copy; 2024 LuxeMart. 保留所有权利。</p>
                </div>
                <div class="social-links">
                    <a href="#wechat" class="social-link">微信</a>
                    <a href="#weibo" class="social-link">微博</a>
                    <a href="#douyin" class="social-link">抖音</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>